<template>
  <div class="upload-file-container">
    <div class="upload-file">
      <form id="myform">
        <input
          ref="uploadFileInput"
          id="uploadFileInput"
          type="file"
          @change="handleFileChange"
        />
        <el-button @click="handleUpload">文件分片上传</el-button>
        <el-button @click="resetFile">重置</el-button>
      </form>
    </div>
    <div class="upload-file-Progress">
      <div class="total-progress">
        <div class="progress-tips">文件上传进度 :</div>
        <el-progress
          :text-inside="true"
          :stroke-width="16"
          :percentage="uploadPercentage"
        />
        <div class="progress-tips">生成hash文件进度 :</div>
        <el-progress
          :text-inside="true"
          :stroke-width="16"
          :percentage="hashPercentage"
        />
      </div>
      <div class="chunkfile-progress">
        <el-table :data="fileContainer.data" style="width: 100%">
          <el-table-column prop="fileHash" label="分片文件" width="480" />
          <el-table-column prop="chunk.size" label="文件大小(kb)" width="180" />
          <el-table-column label="上传进度">
            <template #default="scope">
              <el-progress
                :text-inside="true"
                :stroke-width="14"
                :percentage="scope.row.percentage"
                status="success"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="upload">
import useUploadFile from './useUpload'
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { fileUpload } from '@/types/file'
const {
  handleFileChange,
  handleUpload,
  resetFile,
  hashPercentage,
  fileContainer,
  uploadFileInput,
} = useUploadFile()

const uploadPercentage = computed(() => {
  if (!fileContainer.file || !fileContainer.data.length) return 0
  // 遍历文件切片，将每个切片已上传的部分累加
  const loaded = fileContainer.data
    .map((item) => {
      // console.log(
      //   `file-hash: ${item.fileHash} - chunk-size : ${item.chunk.size} , item-percentage : ${item.percentage}`
      // )
      return item.chunk.size * item.percentage
    })
    .reduce((acc, cur) => acc + cur)

  console.log('loaded', loaded)
  console.log('fileContainer.file.size', fileContainer.file.size)
  // 每个切片已上传的部分累加的大小 除以 整个文件的大小 = 当前文件的上传进度
  return parseInt((loaded / fileContainer.file.size).toFixed(2))
})

watch(
  () => uploadPercentage.value,
  (newValue) => {
    console.log(`文件: ${fileContainer.name} | 上传总进度 - `, newValue + '%')
  },
  {
    deep: true,
    immediate: true,
  },
)
</script>

<style lang="scss" scoped>
.upload-file-container {
  display: flex;
  flex-direction: column;
  justify-content: start;

  .upload-file {
    padding: 20px;
  }

  .upload-file-Progress {
    padding-left: 20px;

    .total-progress {
      width: 100%;

      .progress-tips {
        padding: 15px;
        padding-bottom: 15px;
      }
    }

    .chunkfile-progress {
      width: 100%;
      margin-top: 10px;
    }
  }
}
</style>
